<template>
	
		<swiper
			:class="show"
			:indicator-dots="indicatorDots"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration">
			<block>
				<swiper-item>
					<!-- <view class="emoji_item">
						<image
							v-for="(item, index) in emojiObj.map1"
							:src="emojiObj.path + item"
							:key="index"
							@tap="sendEmoji"
							:data-emoji="index" />
					</view> -->
					<view class='action_item_box'>
						<view class='action_item_out' @tap='sendEmoji' data-type=1>
							<view class='action_item'>
								<div class="icon iconfont icon-xiangce font_group_size_small"></div>
							</view>
							<div class='more_group_font'>相册</div>
						</view>
						
						<view class='action_item_out' @tap='sendEmoji' data-type=2>
							<view class='action_item'>
								<div class="icon iconfont icon-paishe_A_Facet font_group_size_small"></div>
							</view>
							<div class='more_group_font'>拍摄</div>
						</view>
						
						
						<view class='action_item_out' @tap='sendEmoji' data-type=3>
							<view class='action_item'>
								<div class="icon iconfont icon-weizhi8 font_group_size_small"></div>
							</view>
							<div class='more_group_font'>位置</div>
						</view>
						
						
						
					<!-- 	<view class='action_item'>
							<span class="icon iconfont icon-yuyin font_group_size_small"></span>
							<span class='more_group_font'>相册</span>
						</view>
						<view class='action_item'>
							<span class="icon iconfont icon-yuyin font_group_size_small"></span>
							<span class='more_group_font'>相册</span>
						</view> -->
					</view>
				</swiper-item>
			</block>
			<!-- <block class="second">
				<swiper-item>
					<view class="emoji_item">
						<image
							v-for="(item, index) in emojiObj.map4"
							:src="emojiObj.path + item"
							:key="index"
							@tap="sendEmoji"
							:data-emoji="index" />
					</view>
					<view class="emoji_item">
						<image
							v-for="(item, index) in emojiObj.map5"
							:src="emojiObj.path + item"
							:key="index"
							@tap="sendEmoji"
							:data-emoji="index" />
					</view>
					<view class="emoji_item">
						<image
							v-for="(item, index) in emojiObj.map6"
							:src="emojiObj.path + item"
							:key="index"
							@tap="sendEmoji"
							:data-emoji="index" />
					</view>
				</swiper-item>
			</block> -->
		</swiper>
		
	
</template>

<script>
	let msgType = require("../../../msgtype");
	let EMOJI_STATUS = {
		OPENED: "showEmoji",
		CLOSED: "emoji_list",
	};
	export default {
		components: {
			
		},
		props: {
			
		},
		data() {
			return {
				show: EMOJI_STATUS.CLOSED,
				emoji: this.$im.Emoji,
				emojiObj: this.$im.EmojiObj,
				
				interval: 5000,
				duration: 1000,
				autoplay: false,
				indicatorDots: true,	// 显示面板指示点
			}
		},
		created() {
			
		},
		amount() {
			console.log(1);
		},
		onReady() {
			
		},
		
		methods: {
			// openEmoji(){
			openMore(){
				this.show = EMOJI_STATUS.OPENED
			},
			
			//cancelEmoji(){
			cancelMore(){
				this.show = EMOJI_STATUS.CLOSED
			},
			
			// 输出 emoji
			sendEmoji(event){
				// var emoji = event.target.dataset.emoji;
				// this.$emit('newEmojiStr', {
				// 	msg: emoji,
				// 	type: msgType.EMOJI,
				// })
				console.log('event的值',event);
				var type=event.currentTarget.dataset.type;
				console.log('type的值',type);
				//相册
				if(type==1){
					this.$emit('sendImage');
					//拍摄
				}else if(type==2){
					this.$emit('openCamera');
					
				}else if(type==3){
					console.log('发送位置');
					this.$emit('sendMessageLocation');
				}
				
				
			},
		}
	}
</script>

<style>
	.emoji_list {
		margin-top: 30px;
		width: 100%;
		height: 145px;
		background-color: #dddddd;
		padding-top: 10px;
		padding-left: 3%;
		display: none;
	}
	
	.showEmoji {
		margin-top: 30px;
		width: 100%;
		height: 145px;
		/* height: 250px; */
		background-color: #dddddd;
		padding-top: 10px;
		padding-left: 3%;
		display: block;
	}
	
	.emoji_list image,
	.showEmoji image {
		width: 26px;
		height: 26px;
		margin: 5px 2%;
	}
	
	.emoji {
		width: 26px;
		height: 26px;
		margin: 0 0;
	}
	
	.emoji_item {
		display: flex;
		justify-content: space-around;
		margin-right: 20px;
	}
	.action_item_out{
		align-items:center;
		display:flex;
		margin-right:66rpx;
		flex-direction: column;
	}
	/*重新写的样式*/
	.action_item{
		width:106rpx;
		height:106rpx;
		background-color:white;
		border-radius:30rpx;
		text-align:center;
	}
	.font_group_size_small{
		font-size:70rpx;
	}
	.action_item_box{
		display:flex;
		padding:0rpx 40rpx;
	}
	.action_item_box .action_item_out:nth-of-type(4n){
		margin-right:0rpx;
	}
</style>
